<template>
    <div id="Header">
        <nuxt-link id="Logo" to="/" />
        <div id="QuickLinks">
            <nuxt-link to="/viewCategory/FISH" class="link" id="FISH">FISH</nuxt-link><!--空白注释
            --><nuxt-link to="/viewCategory/DOGS" class="link" id="DOGS">DOG</nuxt-link><!--空白注释
            --><nuxt-link to="/viewCategory/REPTILES" class="link" id="REPTILES">REPTILE</nuxt-link><!--空白注释
            --><nuxt-link to="/viewCategory/CATS" class="link" id="CATS">CAT</nuxt-link><!--空白注释
            --><nuxt-link to="/viewCategory/BIRDS" class="link bird" id="BIRDS">BIRD</nuxt-link>
        </div>
        <div id="Search">
            <input type="text"
                name="keyword"
                id="inputSearch"
                placeholder="Click Here To Search"
                autocomplete="off"
                @focus="resultShow = true"
                @blur="resultShow = false"
                @input="autoComplete"
                @keyup.enter="search"
                v-model="keyword"
            />
            <div id="searchIcon" @click="search"></div>
        </div>
        <div id="Menu">
            <nuxt-link to="/viewCart" class="account">Cart</nuxt-link>
            <template v-if="isSignIn && account != null">
                <nuxt-link class="account" to="/account">Account</nuxt-link>
                <nuxt-link class="account" to="/signOut">Sign Out</nuxt-link>
            </template>
            <template v-else>
                <nuxt-link class="account" to="/login">Sign In</nuxt-link>
            </template>
        </div>
        <div id="searchResult" :style="{height: (itemList.length * 30 + 20) + 'px'}" :class="[resultShow === null ? '' : (resultShow === true ? 'show' : 'hide')]">
            <template v-if="itemList.length !== 0">
                <div class="tipItem" v-for="(item, index) of itemList" @mousedown="itemClick(item)" :key="`item-${index}`">{{ item }}</div>
            </template>
            <template v-else-if="keyword !== ''">
                <div class="tipItem">Sorry, no results</div>
            </template>
        </div>
    </div>

</template>

<script>
import { mapState } from 'vuex'

export default {
    data() {
        return {
            resultShow: null,
            keyword: '',
            itemList: []
        }
    },
    computed: {
        ...mapState({
            isSignIn: state => state.account.signIn,
            account: state => state.account.account
        })
    },
    methods: {
        autoComplete() {
            this.$api.search.autoComplete(this.keyword).then((res) => {
                if(res.data.status === 'OK') {
                    console.log(res.data.data)
                    this.itemList.length = 0
                    this.itemList.push(...res.data.data)
                }
                else {
                    console.log(res.data.msg)
                }
            }, (error) => {
                console.log(error)
            }).catch((error) => {
                console.log(error)
            })
        },
        search() {
            this.$router.push(`/search/${this.keyword}`)
        },
        itemClick(item) {
            this.keyword = item
            this.search()
        }
    }
}
</script>

<style lang="scss" scoped>
#Header
{
    position: fixed;
    top: 0;
    width:100%;
    overflow: hidden;
    background-color: #507e64;
    z-index: 10;
    color: #efe7db !important;
    height: 80px;
}

#Logo
{
    display: block;
    padding: 0;
    width: 119px;
    height: 80px;
    margin: auto 6% auto 4%;
    float: left;
    cursor: pointer;
    background-image: url('/logoJPetStore.png');
    background-size: cover;
    color: #efe7db !important;
}

#QuickLinks
{
    float: left;
    position: relative;
    width: 40%;
    top: 10%;
    height: 80%;
    margin: 0;
}

#QuickLinks>.link
{
    display: block;
    line-height: 64px;
    letter-spacing: 1px;
    height: 90%;
    margin: auto 6%;
    border: none;
    float: left;
    position: relative;
    cursor: pointer;
    color: #efe7db !important;
}

#QuickLinks>.link::before
{
    transition: width 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    content: '';
    position: absolute;
    top:0;
    right: 50%;
    width: 0;
    height: 100%;
    border-bottom: 3px solid #efe7db;
}

#QuickLinks>.link::after
{
    transition: width 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    content: '';
    position: absolute;
    top:0;
    left: 50%;
    width: 0;
    height: 100%;
    border-bottom: 3px solid #efe7db;
}

#QuickLinks>.link:hover::before, #QuickLinks>.link:hover::after, #QuickLinks>.link.nuxt-link-active::before, #QuickLinks>.link.nuxt-link-active::after
{
    width: 50%;
}

#bird
{
    margin-right: 0px;
}

#Search
{
    float: left;
    height: 80%;
    position: relative;
    overflow: hidden;
    width: 20%;
    top: 10%;
}

#inputSearch
{
    display: block;
    transition: width 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    float: right;
    right: 11%;
    color:#efe7db;
    border: none;
    border-bottom: 3px solid #efe7db;
    outline: none;
    background: transparent;
    position: relative;
    width: 60%;
    top: 20px;
    height: 24px;
}

#inputSearch::placeholder
{
    color: #e0e0e0;
    letter-spacing: 0.5px;
}

#inputSearch:focus
{
    width: 88%;
}

#searchResult
{
    transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    position: fixed;
    z-index: 15;
    background-color: #efe7db;
    border: none;
    width: 18%;
    opacity: 0;
    min-height: 100px;
    height: 100px;
    left: calc(49.8% + 119px);
    top: 72px;
    border-radius: 10px;
    color: #833d1e;
    box-shadow: 1px 1px 8px #507e64;
    visibility: hidden;
}

#searchIcon
{
    padding: 0px;
    position:absolute;
    top: 21px;
    right: 8px;
    float: right;
    width: 12px;
    height: 12px;
    border-radius: 12px;
    border: 3px solid #efe7db;
    cursor: pointer;
}

#searchIcon::before
{
    position: absolute;
    content: '';
    transform: rotate(45deg);
    top:14px;
    left:9px;
    height: 3px;
    width: 12px;
    border-radius: 3px;
    background-color: #efe7db;
}

#searchProducts
{
    display: none;
}

#Menu
{
    float: right;
    width: 20%;
    height: 80%;
    position: relative;
    top: 10%;
}

.account
{
    color: #efe7db !important;
    height: 50%;
    width: 80px;
    position: relative;
    top: 25%;
    border-radius: 8px;
    border: 3px solid #efe7db;
    float: right;
    margin: auto 2.5%;
    text-align: center;
    line-height: 32px;
    cursor:pointer;
    transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.account:hover
{
    background-color: #efe7db;
    color: #507e64 !important;
}

.hide
{
    transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    opacity: 0 !important;
    transform: translateY(0px);
}

.show
{
    transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    opacity: 1 !important;
    transform: translateY(-10px);
    visibility: visible !important;
}

@keyframes showTips
{
    0%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
}

.tipItem
{
    transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    animation: showTips 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    height: 30px;
    line-height: 30px;
    position: relative;
    left: 15px;
    cursor: pointer;
}

.tipItem:hover
{
    transform: translateX(10px);
}

.selected
{
    border-bottom: 3px solid #efe7db !important;
}
</style>